<template>
    <div>
      <el-tabs tab-position="left" style="height: 200px;">
        <el-tab-pane label="基本信息">
          <div class="jbxx">
            <div class="biaodan">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄" prop="age">
                  <el-input v-model.number="ruleForm.age"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                  <el-radio-group v-model="ruleForm.sex">
                    <el-radio label="女"></el-radio>
                    <el-radio label="男"></el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="工号" prop="wnumber">
                  <el-input v-model.number="ruleForm.wnumber"></el-input>
                </el-form-item>
                <el-form-item label="手机号码" prop="tel">
                  <el-input v-model.number="ruleForm.tel"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model.number="ruleForm.email"></el-input>
                </el-form-item>
                <el-form-item label="部门" prop="department">
                  <el-select style="width: 100%;" v-model="ruleForm.department" placeholder="请选择部门">
                    <el-option label="财务部" value="shanghai"></el-option>
                    <el-option label="人事行政部" value="beijing"></el-option>
                    <el-option label="技术部" value="beijing"></el-option>
                    <el-option label="销售部" value="beijing"></el-option>
                    <el-option label="研发部" value="beijing"></el-option>
                    <el-option label="生产部" value="beijing"></el-option>
                    <el-option label="市场部" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="职务" prop="post">
                  <el-select style="width: 100%;" v-model="ruleForm.post" placeholder="请选择职务">
                    <el-option label="经理" value="shanghai"></el-option>
                    <el-option label="主管" value="beijing"></el-option>
                    <el-option label="助理" value="beijing"></el-option>
                    <el-option label="秘书" value="beijing"></el-option>
                    <el-option label="普通员工" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="入职日期" required>
                  <el-col>
                    <el-form-item prop="date">
                      <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="tx">
              <el-avatar :size="100" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <span v-else style="padding-left: 19px;">修改头像</span>
              </el-upload>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="更多信息">
          <div class="more">
            <div class="biaodan">
              <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
                <el-form-item label="学历" prop="education">
                  <el-select style="width: 100%;" v-model="ruleForm2.education" placeholder="请选择学历">
                    <el-option label="高中" value="shanghai"></el-option>
                    <el-option label="专科" value="beijing"></el-option>
                    <el-option label="本科" value="beijing"></el-option>
                    <el-option label="硕士" value="beijing"></el-option>
                    <el-option label="博士" value="beijing"></el-option>
                    <el-option label="博士后" value="beijing"></el-option>
                  </el-select>
                </el-form-item>
                  <el-form-item label="专业" prop="major">
                <el-input v-model="ruleForm2.name"></el-input>
                </el-form-item>
                  <el-form-item label="毕业院校" prop="graduationSchool">
                <el-input v-model="ruleForm2.graduationSchool"></el-input>
                </el-form-item>
                <el-form-item label="毕业时间" required>
                  <el-col>
                    <el-form-item prop="graduationDate">
                      <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm2.graduationDate" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="个人简介" prop="personalProfile">
                  <el-input type="textarea" :rows="5" v-model="ruleForm2.desc"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm2('ruleForm2')">提交</el-button>
                  <el-button @click="resetForm2('ruleForm2')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="tx">
              <el-avatar :size="100" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
              <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <span v-else style="padding-left: 19px;">修改头像</span>
              </el-upload>
            </div>
          </div>

        </el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
export default {
  name: 'EmpBasic',
  data() {
    // 年龄校验
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          callback()
        }
      }, 1000)
    }
    // 工号校验
    var checkWnumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('工号不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          callback()
        }
      }, 1000)
    }
    // 手机号校验
    var checkTel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号码不能为空'))
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        } else {
          callback()
        }
      }, 1000)
    }
    return {
      imageUrl: '',
      activeName: '1',
      ruleForm: {
        name: '',
        age: '',
        sex: '',
        wnumber: '',
        tel: '',
        email: '',
        department: '',
        post: '',
        date: ''
      },

      ruleForm2: {
        education: '',
        major: '',
        graduationSchool: '',
        graduationDate: '',
        personalProfile: ''
      },

      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        wnumber: [
          { validator: checkWnumber, trigger: 'blur' }
        ],
        tel: [
          { validator: checkTel, trigger: 'blur' }
        ],
        email: [// 邮箱验证没写
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        department: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
        post: [
          { required: true, message: '请选择职务', trigger: 'change' }
        ],
        date: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ]
      },
      rules2: {
        education: [
          { required: true, message: '请选择学历', trigger: 'change' }
        ],
        major: [
          { required: true, message: '请输入专业', trigger: 'blur' }
        ],
        graduationSchool: [
          { required: true, message: '请输入毕业院校', trigger: 'blur' }
        ],
        graduationDate: [
          { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        ],
        personalProfile: [
          { required: true, message: '请填写个人简介', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 10

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!')
      }
      return isJPG && isLt2M
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    submitForm2(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm2(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style>
.el-tabs{
  margin-top: 18px;
  height: 100% !important;
}
.jbxx{
  z-index: 100000;
  position: relative;
}
.biaodan{
  display: inline-block;
  width: 500px;
}
.tx{
  display: inline-block;
  position: absolute;
  top: 3px;
  left: 821px;
}
</style>
